import React, { useEffect, useState } from 'react'
import { Button, Image, Modal,Space, message, Table} from 'antd';
import axios from 'axios';
export default function Index() {
  const [modal, setModal] = useState(false);
  const [giftId, setGiftId] = useState();
  let loginUser = JSON.parse(localStorage.getItem("loginUser"));
  useEffect(async() => {
    message.destroy();
    const resp = await axios.get("http://localhost:8080/queryAbleGift")
    setOriginData(resp.data.data)


    // .then(resp=>{
    //   if (resp.data.state === "0") {
    //     const { data } = resp.data;
    //     let rsList = []
    //     for (let i = 0; i < data.length; i++) {
    //       rsList.push({
    //         id: data[i].id.toString(),
    //         key: i,
    //         name: data[i].name.toString(),
    //         price: data[i].price.toString(),
    //         stock: data[i].stock.toString(),
    //       })
    //     }
    //     setOriginData(rsList)

    //   } else {
    //     message.err(resp.data.message, 1)
    //     setOriginData = []
    //   }
    // }).catch(err => {
    //   console.log(err);
    //   message.error("请求失败!", 1)
    // })
    return () => {
    };
  }, []);
  const [originData, setOriginData] = useState(0);
  const exchange = (id) => {
    console.log('兑换礼物的id是:',id);
    setGiftId(id);
    setModal(true);
  }
  const handleOk = () => {
    axios.post("http://localhost:8080/exchangeGift",{userid:loginUser.id,giftId:giftId}).then(resp=>{
      console.log(resp);
      if (resp.data.state==="0") {
        message.success(resp.data.message,1)
        setModal(false)
        setTimeout(() => {
          window.location.reload()
        }, 800);
      }else{
        message.error(resp.data.message,1)
        setModal(false)
      }
    }).catch(err=>{
      message.error("网络异常!",1)
      setTimeout(() => {
        window.location.reload()
      }, 800);
    })
     
    }
    
  
  const columns = [
    {
      title: '礼品名称',
      dataIndex: 'name',
      width: '20%',
    },
    {
      title: '图片',
      dataIndex: 'photo',
      width: '20%',
      render: (text, record) => (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
          <Image
            width={100}
            height={100}
            src={`http://localhost:8080/getGiftPhoto?id=${record.id}`}
          />
        </div>
      ),
    },
    {
      title: '价格',
      dataIndex: 'price',
      width: '20%',
      align: 'center',
      defaultSortOrder: 'descend',
      sorter: (a, b) => a.price - b.price,
    },
    {
      title: '库存',
      dataIndex: 'stock',
      width: '20%',
      align: 'center'
    },
    {
      title: 'Action',
      key: 'action',
      width: '15%',
      render: (text, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => {exchange(record.id)}}>兑换</Button>
        </Space>
      ),
    },
  ];

  return (
    <div className="animate__animated animate__fadeIn">
        <Table columns={columns} dataSource={originData} />
        <Modal title="提示" visible={modal} onOk={handleOk} onCancel={() => {setModal(false)}}>
                确认兑换?
             </Modal>
    </div>

  )
}
